import React, { Component } from 'react'
import {Route , Switch ,Redirect} from 'react-router-dom'
import MyNavLink from './components/MyNavLink';
import Home from './pages/Home'
import About from './pages/About'
// import Test from './pages/Test'
import Header from './components/Header';
import './App.css'
export default class App extends Component {
    render() {
        return (
            <div>
                <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <Header/>
                </div>
                </div>
                <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        <MyNavLink to='/about'>About</MyNavLink>
                        <MyNavLink to='/home'>Home</MyNavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                    <div className="panel-body">
                        <Switch>
                            {/* exact 严格匹配，如果对界面没有影响就不要开启严格匹配 */}
                            {/* <Route exact path='/react/home' component={Test}/> */}
                            <Route path='/home' component={Home}/> 
                            <Route path='/about' component={About}/>
                            <Redirect to='/home'/>
                        </Switch>
                    </div>
                    </div>
                </div>
                </div>
          </div>
        )
    }
}
